<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false" :background="{background:'#2979ff'}">
			<view class="search-nav">
				<u-search @click="search" color="#ffffff" placeholder-color="#ffffff" placeholder="代码/名称/首拼音" :show-action="false" :disabled="true" bg-color="#2979ff" border-color="#a0cfff"></u-search>
			</view>
		</u-navbar>
		<view id="fixed" style="position: fixed;width: 100%; z-index: 99;">
			<view class="top-info">
				<view class="u-p-tb-20 u-font-14 u-type-info-light"><u-icon name="reload" class="u-m-r-10"></u-icon>数据更新时间：{{updatedAt ? updatedAt:'-'}}</view>
				<view class="market-status">
					<u-row gutter="0">
						<u-col span="4" text-align="center">
							<view class="item grid-text u-type-error u-border-right">
								<view class="u-font-bold">上涨<u-icon name="arrow-upward" :size="30"></u-icon></view>
								<view class="u-m-t-10">{{marketStatus.up}}</view>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="item grid-text u-border-right">
								<view class="u-font-bold">平盘<u-icon name="minus" :size="30"></u-icon></view>
								<view class="u-m-t-10">{{marketStatus.pp}}</view>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="item grid-text u-type-success">
								<view class="u-font-bold">下跌<u-icon name="arrow-downward" :size="30"></u-icon></view>
								<view class="u-m-t-10">{{marketStatus.down}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view :style="{'height':spaceHeight}"></view>
		<view class="tips u-p-20" v-show="false">{{title}}</view>
		<view class="bk-info u-m-b-20" v-for="(v, k) in bksInfo" :key="k">
			<view class="u-bg-white u-p-20 u-font-bold u-flex" @tap="toBkList(v.code)">
				<view class="u-flex-1">{{v.name}}</view>
				<view class="u-type-info-dark"><u-icon name="arrow-right"></u-icon></view>
			</view>
			<u-grid :col="3">
				<u-grid-item v-for="(d, key) in v.data" :key="key" @click="toBkPage(d.bk_code)">
					<view class="u-text-center">
						<view class="u-m-b-10 u-font-bold" >{{d.bk_name}}</view>
						<view class="u-text-center u-m-b-10 u-font-bold" :class="[nameColor(d.bk_ds3)]">{{d.bk_ds3/100}}%</view>
						<view class="u-font-22 u-type-info-dark">{{d.bond_name}} <text class="u-p-l-10" :class="[nameColor(d.bk_ds3)]">{{d.bond_j_bfb/100}}%</text></view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<l-bond-list ref="bondLists" :status="loadingStatus" :offsetTop="spaceHeightRpx"></l-bond-list>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				updatedAt:'',
				tabs:[
					{cate_name:'全部转债'},
					{cate_name:'新债申购',cate_count:5},
					{cate_name:'等待上市',cate_count:1},
				],
				current:0,
				spaceHeight:'226rpx',
				spaceHeightRpx:0,
				marketStatus:{up:'-',pp:'-',down:'-'},
				bksInfo:[
					{
					code:2,
					path:'',
					name:'行业板块',
					data:[
						{bk_name:'行业板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'行业板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'行业板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'行业板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'行业板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'行业板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0}
					]
				},{
					code:3,
					path:'',
					name:'概念板块',
					data:[
						{bk_name:'概念板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'概念板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'概念板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'概念板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'概念板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0},
						{bk_name:'概念板块', bk_ds3:'1',bond_name:'',bond_j_bfb:0}
					],
					}
				],
				orderType:0,//排序:0=>涨幅，1=>溢价,2=>成交额，3=>最新
				order:'desc',
				lists:[],
				pageNum:1,
				loadingStatus:'loading',
				lock:true,
				show:true,
				lastPage:1,
				title:''
			}
		},
		onLoad() {
			console.log('load')
			this.$u.api.marketStatus().then(data=>{
				// console.log(data)
				this.marketStatus = data.data;
			});
			
			this.$u.api.bksIndex().then(data=>{
				this.bksInfo = data.data;
			});
			
			this.$u.api.updatedAt().then(data =>{
				this.updatedAt = data.data.updated_at;
			})
			
			this.$u.api.tips().then(data=>{
				this.title = data.data;
			})
			
			// this.$u.api.indexList().then(data =>{
			// 	console.log(data)
			// 	this.lists = data.data;
			// 	this.lock = false;
			// })
			
			
			// this.marketStatus = data.data;
			// console.log(status)
		},
		onShareAppMessage(obj) {
			
		},
		onReachBottom(){
		
			this.$refs.bondLists.reachBottom();
		// 	if(this.lock) return false;
			
		// 	const page = this.pageNum +1;
		
		// 	this.lock = true;
			
		// 	if(this.pageNum > this.lastPage){
		// 		this.loadingStatus = 'nomore';
		// 		return false;
		// 	}
			
		// 	this.$u.api.indexList(page, this.order, this.orderType).then(data =>{
		// 		console.log(data)
		// 		this.lists = this.lists.concat(data.data);
		// 		this.lastPage = data.last_page;
		// 		this.pageNum = page;
		// 		this.lock = false;
		// 	});
		},
		mounted() {
			this.queryTopHeight();
			console.log('mouted')
			
		},
		methods:{
			change(index) {
				
				this.current = index;
				// setTimeout(()=>{
				// 	this.queryTopHeight();
				// },10);
				
			},
			queryTopHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#fixed').boundingClientRect(data => {
				  console.log('navbar:',data.height)
				  const systemInfo = uni.getSystemInfoSync();
				  let navHeight = systemInfo.platform == 'ios' ? 44 : 48;
				  
				  //#ifdef H5
				  navHeight=0;
				  //#endif
				  
				  this.spaceHeight = data.height + 'px';
				  this.spaceHeightRpx = (data.height+systemInfo.statusBarHeight+ navHeight) * 750 / systemInfo.screenWidth;
				  
				  // console.log('rpxHeight:',this.spaceHeightRpx,systemInfo.platform)
				}).exec();
			},
			nameColor(zf){
				let cls = '';
				if(zf < 0) cls = 'green';
				if(zf > 0) cls = 'red';
				return cls;
			},
			orderClick(type){
				this.orderType = type;
				this.order = this.order == 'desc' ? 'asc':'desc';
				
				this.$u.api.indexList(1,this.order, type).then(data =>{
					console.log(data)
					this.lists = data.data;
				})
			},
			toBkList(code){
				uni.navigateTo({
					url:'/pages/bks/list?type='+code
				})
			},
			toBkPage(code){
				this.$u.route('/pages/bks/item',{"code":code});
			},
			search(){
				this.$u.func.showToast('搜索功能开发中···')
			}
		}
	}
</script>

<style scoped>
	.search-nav{
		width: 100%;
		margin: 0 20rpx;
	}
	.top-info{
		width: 100%;
		padding: 0 20rpx;
		background: #2979FF;
		padding-bottom: 20rpx;
	}
	.market-status{
		background-color:#fff;/* rgba(0, 0, 0, 0.5); */ 
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	
	.market-status .pb{
		color: #fff;
	}
	.content-box .item{
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.content-box .item .info{
		padding: 26rpx 10rpx;
	}
	.bond-screen{
		background-color: #fff;
	}
	.order .icon{
		transform:scale(.6);
	}
	.tips{
		background-color: #fdf6ec;
		color: #FF6600;
	}
</style>
